<template>
  <div class="form__container">
    <FormTitle>国外主体-联系人信息</FormTitle>
    <FormTable
      rowKey="localUUID"
      :buttons="pageData.buttons"
      :tableData="pageData.localData.globalContacts"
      :columns="pageData.columns"
    >
      <template #rowOperations="{ row }">
        <div v-if="row.hasDeleted === 0" class="form-table__row_operations">
          <t-link variant="text" theme="primary" @click="handleEditForm(row)" v-if="!readOnly">修改</t-link>
          <t-link variant="text" theme="danger" @click="handleDeleteForm(row)" :disabled="readOnly">删除</t-link>
        </div>
        <div v-else>
          <t-link theme="danger" :disabled="readOnly" variant="text" @click="handleUnDeleteForm(row)">撤销删除</t-link>
        </div>
      </template>
    </FormTable>
  </div>
  <EditContact
    v-if="pageData.showEditTableForm"
    :showDialog="pageData.showEditTableForm"
    :editFormData="pageData.editTableFormData"
    @onConfirm="handleFormConfirm"
    @onCancel="pageData.showEditTableForm = false"
    :mode="pageData.editTableFormMode"
  />
</template>

<script setup lang="ts">
// 框架和组件库
import { defineAsyncComponent, reactive, toRaw, watch } from "vue";

// 工具函数
import { v4 as uuidv4 } from "uuid";

const EditContact = defineAsyncComponent(() => import("./EditContact.vue"));

const props = defineProps(["formData", "readOnly"]);
const emits = defineEmits(["updateData"]);

const pageData = reactive({
  buttons: [
    {
      name: "新建",
      icon: "add",
      disabled: props.readOnly,
      click: () => {
        handleNewForm();
      }
    }
  ],
  columns: [
    {
      colKey: "name",
      title: "联系人姓名",
      width: 200
    },
    {
      colKey: "phone",
      title: "联系人手机",
      width: 200
    },
    {
      colKey: "department",
      title: "联系人部门",
      width: 200
    },
    {
      colKey: "job",
      title: "联系人职务",
      width: 200
    },
    {
      colKey: "wechatId",
      title: "微信号",
      width: 200
    },
    {
      colKey: "whatsappId",
      title: "WhatsApp 号",
      width: 200
    }
  ],
  localData: { ...props.formData },
  showEditTableForm: false,
  editTableFormMode: "new",
  editTableFormData: {},
  emptyTableFormData: {
    id: "",
    localUUID: "",
    status: 0,
    hasDeleted: 0,
    remark: "",
    name: "",
    phone: "",
    department: "",
    wechatId: "",
    whatsappId: "",
    job: ""
  }
});

const handleNewForm = () => {
  const emptyTableFormDataToRaw = toRaw(pageData.emptyTableFormData);
  const emptyTableFormData = structuredClone(emptyTableFormDataToRaw);
  pageData.showEditTableForm = true;
  pageData.editTableFormData = emptyTableFormData;
  pageData.editTableFormMode = "new";
};

const handleEditForm = (row: Record<string, any>) => {
  pageData.editTableFormMode = "edit";
  const tableFormDataToRaw = toRaw(row);
  const tableFormData = structuredClone(tableFormDataToRaw);
  pageData.editTableFormData = tableFormData;
  pageData.showEditTableForm = true;
};

const handleDeleteForm = (row: Record<string, any>) => {
  const index = pageData.localData.globalContacts.findIndex(
    (item: Record<string, any>) => item.localUUID === row.localUUID
  );
  if (index > -1) {
    pageData.localData.globalContacts[index].hasDeleted = 1;
  }
};

const handleUnDeleteForm = (row: Record<string, any>) => {
  const index = pageData.localData.globalContacts.findIndex(
    (item: Record<string, any>) => item.localUUID === row.localUUID
  );
  if (index > -1) {
    pageData.localData.globalContacts[index].hasDeleted = 0;
  }
};

const handleFormConfirm = (newData: Record<string, any>) => {
  // 先看原来的数组对象里面有没有这个数据，有就修改，没有就添加
  // 用localUUID来作为识别
  const index = pageData.localData.globalContacts.findIndex(
    (item: Record<string, any>) => item.localUUID === newData.localUUID
  );
  if (index !== -1) {
    pageData.localData.globalContacts[index] = newData;
  } else {
    newData.localUUID = uuidv4();
    pageData.localData.globalContacts.push(newData);
  }
  pageData.showEditTableForm = false;
};

watch(
  () => pageData.localData,
  (newData) => {
    emits("updateData", newData);
  },
  { deep: true, flush: "post" }
);

// pageData.localData = { ...props.formData };
</script>
